<template>
  <van-nav-bar
      :title="titleName"
      :border=false
      class="title-text"
  >
    <template #left>
      <van-icon :name="require('../../assets/ic_back.png')" size="18" @click="onBack"/>
    </template>
  </van-nav-bar>
  <van-space direction="vertical" fill class="space-v1"/>
  <swiper
      :space-between="20"
      :slides-per-view="3"
      :centered-slides="true"
      :pagination="{ clickable: true }"
      style="background-color: white"
      @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(item, index) in filmList" :key="index">
      <van-image :src="item.filmCover" width="102px" height="144px"/>
    </swiper-slide>
  </swiper>
  <div class="content-v">
    <span class="span1">{{ item.filmName }}</span>
    <span class="span2">{{ formatDate() }} | {{ item.filmGenre }}</span>
    <span class="span2">{{ item.starring }}</span>
    <van-divider :style="{color:'#EEEEEE',marginTop:'11px',marginBottom:'0px'}"/>
    <van-tabs v-model:active="active" line-height="2px" line-width="24px" @change="onChange"
              color="#AB9263" title-inactive-color="#333333" title-active-color="#AB9263" ref="tabs">
      <van-tab :title="tab.str" v-for="tab in timeTabList"
               title-class="tab-text" :name="tab.time">
        <van-space direction="vertical" fill class="space-v">
          <div class="item-v" v-for="bean in listData">
            <span class="item-text1">{{ getTime12HStr(bean.startTime) }}</span>
            <span class="item-text2">{{ bean.language }}</span>
            <span class="item-text2 item-text3">{{ bean.screenName }}</span>
            <span class="btn" @click="showTipDialog(bean)">{{ $t('msg.yyTitle') }}</span>
          </div>
        </van-space>
      </van-tab>
    </van-tabs>
  </div>
  <van-overlay :show="show" class="over-v">
    <div class="wrapper" @click.stop>
      <div class="block">
        <span class="block-text">{{$t('msg.dialogStr1')}}</span>
        <div class="line1"/>
        <div class="block-v1">
          <span class="block-cancel" @click="onCancel">{{$t('msg.dialogStr2')}}</span>
          <div class="line2"/>
          <span class="block-sure" @click="doAppointment">{{$t('msg.dialogStr3')}}</span>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

<script>
import {doAppointmentSession, getFilmDetail, getSessionList} from "@/http/api";
import {ref} from "vue";
import {showToast} from "vant";
import {getTime12HStr, getTimeList} from "@/utils/utils";
import {Swiper, SwiperSlide} from 'swiper/vue'
import 'swiper/css'

export default {
  name: 'FilmDetail',
  components: {
    Swiper,
    SwiperSlide
  },
  computed: {},
  setup() {
    const onBack = () => history.back();
    const active = ref(0);
    return {
      onBack,
      active
    };
  },
  data() {
    return {
      cid: this.$route.query.id,
      filmList: [],// 剧目列表
      item: {},// 单个剧目信息
      titleName: this.$route.query.name||"",
      timeTabList: [],// 时间列表
      listData: [],//场次列表
      show: false,
      sessionId:""
    }
  },
  mounted() {
    this.timeTabList = getTimeList()
    // this.$refs.tabs.resize();
    this.getDetail()
  },
  methods: {
    getTime12HStr,
    async getDetail() {
      try {
        let data = await getFilmDetail(this.cid)
        this.filmList = data.content
        this.item = this.filmList[0]
        this.active = 1
      } catch (e) {
      }
    },
    formatDate() {
      return this.item.durationTime / 60 + "分钟"
    },
    onSlideChange(t) {
      this.item = this.filmList[t.activeIndex]
    },
    onChange(time) {
      this.getTabData(time)
    },
    async getTabData(time) {
      try {
        let data = await getSessionList(this.cid, this.item._id, time)
        this.listData = data.content
      } catch (e) {

      }
    },
    showTipDialog(bean) {
      this.show = true
      this.sessionId = bean._id
    },
    onCancel(){
      this.show = false
      this.sessionId=""
    },
    async doAppointment() {
      this.show = false
      try {
        let data = await doAppointmentSession(this.sessionId)
        showToast(this.$t('msg.yySuccess'))
      } catch (e) {
        showToast(e.msg)
      }
    }
  }
}
</script>

<style scoped>
.content-v {
  display: flex;
  flex-direction: column;
  background-color: white;
}

.span1 {
  font-size: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 21px;
  padding: 25px 36px 5px;
}

.span2 {
  font-size: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 16px;
  padding: 0px 36px 5px;
}

.tab-text {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  line-height: 18px;
}

.space-v1 {
  padding-top: 45px;
  background: white;
}

.space-v {
  padding-top: 10px;
  background: #F7F8FA;
}


.item-v {
  padding: 25px 18px 25px 16px;
  display: flex;
  flex-direction: row;
  background-color: white;
  align-items: center;
}

.item-text1 {
  font-size: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 22px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.06);
}

.item-text2 {
  font-size: 13px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 17px;
  margin-left: 18px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.06);
}

.item-text3 {
  flex: 1;
  text-align: left;
}

.btn {
  align-self: flex-end;
  background: #AB9263;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 5px 13px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 18px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.06);
}

.swiper-slide {
  width: 60%;
  transition: all 0.1s ease-in-out;
}

.swiper-slide-prev {
  transform: scale(0.8);
}

.swiper-slide-next {
  transform: scale(0.8);
}

.over-v {
  --van-overlay-background: rgb(0, 0, 0, 0.5)
}

.wrapper {
  display: flex;

  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 280px;
  height: 145px;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-text {
  padding: 36px 20px;
  font-size: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #242323;
  line-height: 24px;
  -webkit-background-clip: text;
}

.block-cancel {
  flex: 1;
  font-size: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}

.block-sure {
  flex: 1;
  font-size: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #AB9263;
  line-height: 24px;
}

.block-v1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-items: center;
}

.line1 {
  width: 100%;
  height: 1px;
  background: #EEEEEE;
}

.line2 {
  width: 1px;
  height: 100%;
  background: #EEEEEE;
}
</style>
